<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>雪碧图</title>
		<style type="text/css">
			/**
			 * 做完功能后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁
			 * 这个闪烁会产生不佳的用户体验
			 * 原因：
			 * 		背景图片时以外部资源的方式加载进网页的，浏览器每加载一次外部资源就需要单独的发送一次请求，
			 *	但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
			 *
			 * 为了解决该问题，可以将三种状态图片整合为一张图片，然后通过background-position来切换要显示的图片位置，
			 * 这种技术叫做图片整合技术（CSS-Sprite雪碧图）
			 * 优点：
			 *		1.将多个图片整合为一张图片里，浏览器只需要发送一次请求，提高了访问效率和用户体验
			 *		2.减小了图片总大小
			 */
			
			.btn1:link {
				display: block;
				width: 116px;
				height: 50px;
				text-decoration: none;
				background-image: url(img/xuebi.png);
				text-align: center;
				line-height: 50px;
				color: white;
			}
			.btn1:hover {
				background-position: -116px 0px;
			}
			.btn1:active {
				background-position: -232px 0px;
			}
			.btn1:visited {
				color: white;
			}
		</style>
	</head>
	<body>
		<a class="btn1" href="#">btn1</a>
	</body>
</html>
